<template>
  <div class="card p-3 card-body" v-loading="loading">
    <div class="d-flex">
      <div class="flex-1" v-if="isCompany">
        <div class="d-flex my-2">
          <div class="flex-1">企业名称： {{ data.customer_name }}</div>
          <div class="flex-1">经营地址： {{ data.address || '' }}</div>
        </div>
        <div class="d-flex my-2">
          <div class="flex-1">组织类型： {{ data.org_class_name }}</div>
          <div class="flex-1">统一社会信用代码：{{ data.register_no }}</div>
        </div>
        <div class="d-flex my-2">
          <div class="flex-1">负责人： {{ data.corp_name }}</div>
          <div class="flex-1">负责人身份证号： {{ data.id_card }}</div>
        </div>
        <div class="d-flex my-2">
          <div class="flex-1">联系电话： {{ data.mobile_no }}</div>
          <div class="flex-1">
            家庭住址： {{ (data.family_address || '') + (data.family_address_code_detail || '') }}
          </div>
        </div>
        <div class="d-flex my-2">
          <div class="flex-1">
            <div>主营产业： {{ data.main_business }}</div>
            <div class="my-2">
              物联增信：{{ hasDevice ? '有' : '无' }}
              <el-button type="text" v-if="hasDevice" class="py-0" @click="handleView">
                <i class="fa fa-search"></i>
              </el-button>
            </div>
          </div>
          <div class="flex-1">经营范围： {{ data.business_scope }}</div>
        </div>
      </div>
      <div v-else class="flex-1">
        <div class="d-flex my-3">
          <div class="flex-1">企业名称： {{ data.customer_name }}</div>
          <div class="flex-1">家庭住址： {{ data.family_address }}</div>
        </div>
        <div class="d-flex my-3">
          <div class="flex-1">联系电话： {{ data.mobile_no }}</div>
          <div class="flex-1">负责人身份证号： {{ data.id_card }}</div>
        </div>
        <div class="d-flex my-3">
          <div class="flex-1">
            <div>主营产业： {{ data.main_business }}</div>
            <div>
              物联增信：{{ hasDevice ? '有' : '无' }}
              <el-button type="text" v-if="hasDevice" class="py-0" @click="handleView">
                <i class="fa fa-search"></i>
              </el-button>
            </div>
          </div>
          <div class="flex-1">经营范围： {{ data.business_scope }}</div>
        </div>
      </div>
      <div style="width: 100px" class="text-center">
        <!-- <div class="card-status">白名单用户</div> -->
        <div class="card-score success">{{ data.score || '-' }} 分</div>
      </div>
    </div>

    <el-dialog
      append-to-body
      top="30px"
      width="1000px"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <div>
        <h4 class="device-title">生物资产监管</h4>
        <after-rfid :farm-id="farmId"></after-rfid>
      </div>
      <h4 class="device-title">远程查看</h4>
      <div class="card mb-4">
        <div class="card-body">
          <h5 class="device-subtitle">在线视频</h5>
          <after-video :farm-id="farmId"></after-video>
          <h5 class="device-subtitle mt-3">图片资料</h5>
          <after-capture :farm-id="farmId"></after-capture>
        </div>
      </div>
      <div>
        <h4 class="device-title">电表查询</h4>
        <after-ele :farm-id="farmId"></after-ele>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { IOT_SERVICE_NAME } from '@/credit/plugins/constant'
import AfterEle from '@/credit/views/city/self/after/AfterEle'
import AfterRfid from '@/credit/views/city/self/after/rfid/DeviceList'
import AfterVideo from '@/credit/views/city/self/after/video/VideoList'
import AfterCapture from '@/credit/views/city/self/after/capture/CaptureList'
export default {
  components: {
    AfterEle,
    AfterRfid,
    AfterVideo,
    AfterCapture,
  },
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      hasDevice: false,
      visible: false,
    }
  },

  computed: {
    isCompany() {
      return +this.data.customer_type === 1
    },
    farmId() {
      return this.data.customer_id
    },
  },
  watch: {
    farmId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    getData() {
      this.hasDevice = false
      if (!this.farmId) {
        return
      }
      this.loading = true
      Promise.all([this.getEleTable(), this.getDevices()])
        .then(([res, res1]) => {
          const data = (res && res.data) || {}
          const deviceInfo = res1?.data?.[0] ?? {}
          this.hasDevice = !!data.totalCount || !!deviceInfo.device_info
        })
        .finally(() => {
          this.loading = false
        })
    },
    getEleTable() {
      const params = {
        index: 1,
        size: 1,
        'customer_id.eq': this.farmId,
      }
      return this.$api.getData(this.$serviceName, 'datum_customer_ele_table', params)
    },
    getDevices() {
      const params = {
        customer_id: this.farmId,
        subKey: 'device_info.place_info_id',
      }
      return this.$api.getData(IOT_SERVICE_NAME, 'place_info', params)
    },
    handleView() {
      this.visible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.card-body {
  position: relative;
  overflow: hidden;
  font-size: 1.1rem;
}
.card-score {
  position: absolute;
  top: 50px;
  font-weight: 600;
  line-height: 70px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.success {
  color: $success;
  border: 2px solid $success;
}
.warning {
  color: $warning;
  border: 2px solid $warning;
}
.card-status {
  color: white;
  font-size: 0.8rem;
  line-height: 230px;
  transform: rotate(45deg);
  background: $success;
  position: absolute;
  width: 130px;
  height: 130px;
  top: -70px;
  right: -70px;
}
</style>
